@import "base";

@import "comp/header";

header{
	padding: 0 3rem;
	align-items: center;

	a{
		font-size: 1.6rem;
		font-family: Content-font, Roboto, sans-serif;
		font-weight: 500;
		line-height: 1.5;
		margin: 0 1.6rem;
		color: #3884FF;

		&:nth-child(2){
			margin-left: 10rem;
		}

		&:hover{
			color: hsl(217.10000000000002, 100%, 42.7%) !important;
		}
	}
}

.editor, .preview{
	width: 50%;
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
}
.editor{
	float: left;
	position: relative;
	padding-top: 5rem;

	@mixin activeTab{
		color: white;
		background-color: #183055;
		transition: color linear 0.1s, background-color linear 0.1s;
	}

	.tab{
		display: flex;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 5rem;
		padding: 0 3rem;
		align-items: flex-end;
		box-sizing: border-box;

		[data-lang]{
			float: left;
			margin-left: 1rem;
			color: #242A31;
			background-color: #E6ECF1;
			border-top-left-radius: 0.3rem;
			border-top-right-radius: 0.3rem;
			padding: 0.5em 1.6rem;
			cursor: default;

			&:first-child{
				margin-left: 0;
			}

			&:hover{
				@include activeTab;
			}
		}

		.run{
			position: absolute;
			right: 0;
			bottom: 0.5rem;
			padding: 0.2em 1.6rem;
			color: #242A31;
			background-color: #E6ECF1;
			cursor: default;
			border-radius: 3px;
			border: solid 1px #E6ECF1;

			&:hover{
				border-color: #999999;
			}

			&:active{
				background-color: #CCCCCC;
			}
		}
	}

	.editor-wrapper{
		position: relative;
		height: 100%;

		.html, .css, .js{
			display: none;
			height: 100%;
			border: solid 1px #e6ecf1;
			box-sizing: border-box;
		}
	}

	@each $t in html, css, js{
		&[data-tab=#{$t}]{
			.#{$t}{
				display: block;
			}

			[data-lang=#{$t}]{
				@include activeTab;
			}
		}
	}
}
.preview{
	float: right;
	display: flex;
	align-items: center;

	.phone{
		position: relative;
		width: 350px;
		height: 700px;
		margin: 0 auto;
		background: url(../asset/iPhone6.png) no-repeat center/100% 100%;
	}

	.overview{
		position: absolute;
		display: block;
		margin: 10px;
		border: none;
		left: 24px;
		top: 54px;
		width: 286px;
		height: 490px;
		overflow: hidden;
		font-size: 12px;

		.title{
			color: white;
			margin-bottom: 4px;
		}

		.location{
			display: block;
			font-family: consolas, Serif;
			width: 100%;
			border: none;
			outline: none;
			padding: 3px 2px;
		}
	}

	iframe{
		position: absolute;
		display: block;
		margin: 10px;
		border: none;
		left: 24px;
		top: 96px;
		width: 286px;
		height: 490px;
		background: white;
	}
}